<template>
  <div class="jobs">
    <div class="banner">和优秀的人，做有挑战的事</div>

    <div class="main clearfix">
      <el-button class="btn2" type="primary" plain @click="matchByResume">智能匹配</el-button>
      <!-- 侧边栏过滤选择 -->
      <div class="clearfix aside-filter">
        <div class="header">
          <span>选择</span>
          <span class="clear">清空</span>
        </div>
        <div class="job-category job-filter-block">
          <div class="title"></div>
          <checkbox-transfer
              title="职位"
              ref="jobCategory"
              v-model="job_category_id_list"
              :props="{ key: 'id', label: 'name' }"
              :data="jobCategories"
          ></checkbox-transfer>
        </div>
        <div class="job-city job-filter-block">
          <div class="title"></div>
          <checkbox-transfer
              title="城市"
              ref="location"
              v-model="location_code_list"
              :props="{ key: 'code', label: 'name' }"
              :data="jobCities"
          ></checkbox-transfer>
        </div>
      </div>

      <!-- 主体内容 -->
      <div class="content" >
        <h2 class="content-title">开启新的职位 ({{ pageTotalCount }})</h2>
        <ul class="content-list">
          <li class="content-item" v-for="item in recruitPage" :key="item.recruitId">
            <!--            <router-link :to="`/jobs/${item.id}`">-->
            <h3 class="title">{{ item.post }}</h3>

            <div class="subTitle">
              <span class="city">{{ item.workplace }}</span>&nbsp;|
              <span class="job_category">{{ item.position }}</span>&nbsp;|
              <span class="recruitment_channel">{{ item.majorRequire }}</span>
              <el-rate
                  v-if="item.score"
                  v-model="item.score"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                  :colors="colors"
                  style="float: right;">
              </el-rate>
            </div>
            <p class="desc">所属公司：{{ item.enterpriseName }}</p>
            <p class="desc">年龄要求：{{ item.ageRequire }}</p>
            <p class="desc">学历要求：{{ item.educationRequire }}</p>
            <el-button class="btn" type="danger" plain @click="submitResume(item.recruitId)">投递简历</el-button>
            <!--            </router-link>-->
          </li>
        </ul>
        <!-- 分页器 -->
        <div class="pagination-wrapper" v-show="this.pageTotalCount">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="pageTotalCount">
          </el-pagination>
        </div>
<!--        <div class="pagination-wrapper">-->
<!--          <pagination :current-page.sync="currentPage" :total="pageSize"></pagination>-->
<!--        </div>-->
      </div>
    </div>
    <el-backtop></el-backtop>
  </div>
</template>

<script>
import checkboxTransfer from '../../../components/Checkbox-Transfer'

export default {
  name: "job",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      pageTotalCount: 0,
      job_category_id_list: [],
      jobCategories: [],
      jobCities: [],
      location_code_list: [],
      cityList: [],
      cities: [],
      results: [],
      searchBarFixedTop: false,
      loading: false,
      recruitPage: [],
      hasResume:false,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
    };
  },
  mounted() {
    this.getPagination()
    this.getHasResume()
  },
  components: {
    checkboxTransfer,
  },
  methods: {
    async getPagination() {
      try {
        const {currentPage} = this
        await this.$store.dispatch('getPagination', currentPage)
        this.recruitPage = this.$store.state.home.recruitPage.recruitPage.records
        this.currentPage = this.$store.state.home.recruitPage.recruitPage.current
        this.pageSize = this.$store.state.home.recruitPage.recruitPage.size
        this.pageTotalCount = this.$store.state.home.recruitPage.recruitPage.total
      } catch (e) {
        console.log(e)
      }
    },
    handleCurrentChange(pageNo) {
      this.currentPage = pageNo;
      //重新调用findPage方法进行分页查询
      this.getPagination();
    },
    async getHasResume() {
      try {
        await this.$store.dispatch('getHasResume')
        this.hasResume = this.$store.state.resume.hasResume.hasResume
      } catch (e) {
        console.log(e)
      }
    },
    async submitResume(id) {
      if (!this.hasResume){
        this.$notify.warning({
          title: '警告',
          message: '请先填写简历'
        });
      }else {
        try {
          await this.$store.dispatch('getSubmitResume', id)
          this.$notify.success({
            title: '成功',
            message: "恭喜你投递成功!"
          });
        } catch (e) {
          console.log(e)
        }
      }
    },
    matchByResume(){
      if (!this.hasResume){
        this.$notify.warning({
          title: '警告',
          message: '请先填写简历'
        });
      }else {
        this.getMatchResume()
      }
    },
    async getMatchResume() {
      try {
        await this.$store.dispatch('getMatchResume')
        this.recruitPage = this.$store.state.resume.matchResume.recruitList
      } catch (e) {
        console.log(e)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.btn2{
  float: right;
  margin-right: 400px;
}

.btn {
  margin-left: 500px;
}

.banner {
  height: 400px;
  line-height: 400px;
  color: #fff;
  width: 100%;
  min-width: 1200px;
  background-image: url("//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/joblistbanner2x.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  font-size: 32px;
}

.main {
  margin: 0 auto;
  margin-top: 100px;
  padding: 0 100px 0 200px;

  .aside-filter {
    float: left;
    width: 300px;
    padding-right: 20px;

    .header {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 10px;
      width: 100%;

      .clear {
        &.clearable {
          cursor: pointer;
        }
      }
    }

    .job-filter-block {
      margin-bottom: 40px;
    }
  }

  .content {
    min-height: 500px;
    padding-left: 20px;
    margin-left: 300px;

    &-title {
      margin-bottom: 30px;
      margin-left: 20px;
      font-size: 24px;
    }

    &-item {
      margin-bottom: 10px;
      padding: 10px 20px;
      cursor: pointer;

      .title {
        margin: 12px 0;
        font-size: 19px;
      }

      .subTitle {
        font-size: 16px;
        color: #606266;
      }

      .desc {
        white-space: pre-line;
        font-size: 14px;
        text-overflow: clip;
        color: #909399;
        padding-top: 16px;
      }

      &:hover {
        border-radius: 3px;
        background: #fff;
        box-shadow: 0 10px 30px 0 rgba(136, 150, 171, 0.15);
      }
    }

    .pagination-wrapper {
      margin-top: 50px;
      margin-bottom: 50px;
      text-align: left;
    }
  }
}
</style>